<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
const deleteBook = (id: number) => {
  // list.value = list.value.filter(item => item.id !== id)
  list.value.splice(list.value.findIndex(item => item.id === id), 1)
}
const bookInfo = reactive({
  id: 0,
  name: '',
  author: ''
})
const addBook = () => {
  // list.value.push({
  //   id: Date.now(),
  //   name: bookInfo.name,
  //   author: bookInfo.author
  // })
  bookInfo.id = Date.now()
  list.value.push(Object.assign({}, bookInfo))
  bookInfo.author = ''
  bookInfo.name = ''
}
</script>
<template>
  <div id="app">
    <h3>黑马书架</h3>
    <ol>
      <li v-for="(item, index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="deleteBook(item.id)">删除</button>
      </li>
    </ol>
    <h3>添加书籍</h3>
    <label for="name">书名:</label>
    <input type="text" id="name" v-model="bookInfo.name" />
    <br><br>
    <label for="author">作者:</label>
    <input type="text" id="password" v-model="bookInfo.author" />
    <br><br>
    <button @click="addBook">添加</button>
  </div>
</template>
<style lang="css" scoped></style>